import React from "react";
import { Carousel } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';

class Slideshow extends React.Component {
  state = {
    data: [],
    imgHeight: 176,
  }
  render() {
    setTimeout(() => {
      this.setState({
        data: this.props.data,
      });
    }, 100);
    return (
      <Carousel
        autoplay={false}
        infinite
      // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
      // afterChange={index => console.log('slide to', index)}
      >
        {this.state.data.map(val => (
          <a
            key={val.imgurl}
            href="##"
            style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
          >
            <img
              src={val.imgurl}
              alt=""
              style={{ height: '35%',  width: '100%', verticalAlign: 'top' }}
              onLoad={() => {
                // fire window resize event to change height
                // window.dispatchEvent(new Event('resize'));
                this.setState({ imgHeight: 'auto' });
              }}
            />
          </a>
        ))}
      </Carousel>

    );
  }
}

export default Slideshow